<template>
	<view class="store">
		<!-- position: fixed; -->
		<view style="width: 100%;position: fixed;top: 0;z-index: 999;">
			<view class="topFixed"
				style="background: linear-gradient(180deg, rgba(226, 157, 72, 0.35) 0%, rgba(17, 17, 17, 0) 100%);;">
				<view class="" :style="'height:'+navBarInfo.statusBarHeight+'px;'">

				</view>
				<view class="flex align-center justify-between"
					:style="'height:'+navBarInfo.navBarHeight+'px;width:'+navBarInfo.navBarWidth+'px;'">
					<view class="" style="font-size: 0;margin-left: 40rpx;">
						<image style="width: 48rpx;height: 48rpx;" src="../../static/left_jian.png" mode=""></image>
					</view>
					<view class="text-overflow1" style="font-size: 32rpx;color: #eee;text-align: center;"
						:style="'width:'+navBarInfo.navBarContentWidth+'px;'">
						临洮世华洛珏婚纱摄影会馆
					</view>
				</view>

			</view>
		</view>
		<view class="" :style="'height:'+topFixedHeight+'px;'">

		</view>
		<!-- 头像 -->
		<view class="photo flex flex-column justify-evenly align-center position-relative">
			<div class="head">

			</div>
			<div class="name">
				晓峰
			</div>
			<div class="tips flex align-center">
				<div class="tips_content">
					摄影师
				</div>
				<div class="line"></div>
				<div class="tips_content">
					123人喜欢
				</div>
			</div>
			<div class="btn">
				<div class="btn_box">
					<image style="" src="../../static/teacher/Group 3617.png" mode=""></image>
				</div>
				<div class="btn_box">
					<image src="../../static/teacher/fen.png" mode=""></image>
				</div>

			</div>
		</view>
		<!-- 工作室信息 -->
		<view class="studio flex justify-between align-center">
			<div class="leftbox flex">
				<div class="leftPhoto">
					<image src="../../static/teacher/Ellipse 178.png" mode=""></image>

				</div>
				<div class="center_details flex flex-column justify-between">
					<div class="top">
						一度时光婚纱摄影工作室
					</div>
					<div class="tips flex align-center">
						<div class="tips_content">
							摄影师
						</div>
						<div class="line"></div>
						<div class="tips_content">
							123人喜欢
						</div>
					</div>

				</div>
			</div>

			<div class="btn_goin">
				进店
			</div>
		</view>
		<!-- 个人简介 -->
		<div class="linetitle flex justify-between align-center">
			<div class="left_box flex align-center">
				<div class="title_geren" style="margin-right: 10rpx;">
					个人简历
				</div>
				<div class="tianchong">

				</div>
			</div>
			<div class="right_box flex align-center">
				<div class="tianchong">

				</div>
				<div class="title_his">
					4509
				</div>
			</div>
		</div>
		<!-- 详情 -->
		<view class="biographical">
			<div class="item">
				国家一級摄影师、《人像摄影》课程特聘优秀讲师数次荣获金夫人集团优秀客样片奖项
				集团子公司、加盟店特邀样片技术指导
				2021年荣获中国优秀职业婚纱摄影师称号
				2018年参加重庆市人像摄影艺术大赛
				2017年参加世界杯(WPC)摄影大赛
				2015年虎彩杯首届中国专业摄影师大赛-优秀大师2010年获得金夫人集团“摄影大师”称号2008年参加佳能杯全国人像摄影大赛
			</div>
		</view>
		<!-- 擅长 -->
		<div class="linetitle flex align-center">
			<div class="left_box flex align-center">
				<div class="title_geren" style="margin-right: 10rpx;">
					擅长风格
				</div>
				<div class="tianchong">

				</div>
			</div>
		</div>
		<!-- 列表 -->
		<view class="flex" style="margin: 32rpx 32rpx 25rpx 32rpx;">
			<scroll-view style="white-space: nowrap;" scroll-with-animation scroll-x="true"
				:scroll-into-view="'t' + tid">
				<view class="flex">
					<view class="flex flex-column justify-between align-center" v-for="(item , index) in 10" :key="item"
						style="flex-shrink:0;margin-right: 40rpx;height: 136rpx;" @click="selectBigtab(index)">
						<div style="width: 82rpx; height: 82rpx;background-color: #323238;border-radius: 50%;">
							<!-- <image style="width: 100%;height: 100%;" :src="item.src" mode=""></image> -->
						</div>
						<div :class="flag == index?'active_font':'type'">
							擅长风格
						</div>
					</view>
				</view>

			</scroll-view>

		</view>
		<!-- 作品 -->
		<div class="linetitle flex align-center">
			<div class="left_box flex align-center">
				<div class="title_geren" style="margin-right: 10rpx;">
					作品合集
				</div>
				<div class="tianchong">

				</div>
			</div>
		</div>
		<!-- 切换类型 -->
		<view class="flex" style="margin: 32rpx 32rpx 25rpx 32rpx;">
			<scroll-view style="white-space: nowrap;font-size: 0;" scroll-with-animation scroll-x="true"
				:scroll-into-view="'t' + tid">
				<view style="display: inline-block;margin-right:58rpx;" v-for="(item,index) in navsList" :key="index"
					@click="onActive(item.id)">
					<view :id="'t' + item.id" class="flex flex-column justify-center align-center">
						<view class="flex align-center" :style="navIndex == item.id?'color:#F9E8BE;':''"
							style="font-size: 28rpx;color: #999;">
							{{item.name}}
						</view>
						<view class="" v-if="navIndex == item.id"
							style="width: 36rpx;height: 6rpx;background: #F9E8BE;margin-top: 12rpx;">
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 分割线 -->
		<div class="line"></div>
		<!-- 二级选择卡 -->
		<view class="flex" style="margin: 32rpx 80rpx 25rpx 32rpx;">
			<scroll-view style="white-space: nowrap;font-size: 0;" scroll-with-animation scroll-x="true"
				:scroll-into-view="'t' + tid">
				<view style="display: inline-block;margin-right:58rpx;" v-for="(item,index) in navsList" :key="index"
					@click="onActive(item.id)">
					<view :id="'t' + item.id" class="flex flex-column justify-center align-center">
						<view class="flex align-center" :style="navIndex == item.id?'color:#F9E8BE;':''"
							style="font-size: 24rpx;color: #666;">
							{{item.name}}
						</view>
						<!-- <view class="" v-if="navIndex == item.id"
							style="width: 36rpx;height: 6rpx;background: #F9E8BE;margin-top: 12rpx;">
						</view> -->
					</view>
				</view>
			</scroll-view>
			<view class="" @click="onXianS"
				style="font-size: 0;margin-right: 38rpx;width: 104rpx;background-color: #000;">
				<!-- <image style="width: 34rpx;height: 34rpx;" src="../../static/store/fenglei.png" mode=""></image> -->

			</view>
		</view>
		<!-- 内容 -->
		<view class="content_card flex flex-wrap">
			<div v-for="item in 5" class="item">
				<div class="item_picture">

				</div>
				<div class="item_bottom">

				</div>
			</div>

		</view>
		<view class="footer flex justify-between align-center">
			<div class="footer_left flex flex-column align-center justify-between">
				<image style="width: 36rpx;height: 36rpx;" src="../../static/Vectoryellow.png" mode=""></image>
				<view class="schedule">
					查看档期
				</view>
			</div>
			<div class="footer_btn">
				预约
			</div>
		</view>
		<view class="di">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusbarHeight: 0,
				navBarInfo: {},
				topFixedHeight: 0,
				// 作品list
				navsList: [],
				navIndex: 0,
				// 风格list
				bigtabArr: [{
						'src': '../../static/Group 3757.png',
						'name': '套系',
					},
					{
						'src': '../../static/Group 3756.png',
						'name': '店铺'
					},
					{
						'src': '../../static/Group 3755.png',
						'name': '老师'
					},
					{
						'src': '../../static/Group 3753.png',
						'name': '样片'
					},
					{
						'src': '../../static/Group 3821.png',
						'name': '客户'
					}
				],
			}
		},
		onLoad() {

			this.navBarInfo = this.$navBarInfo;
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.topFixed').boundingClientRect(data => {
					this.topFixedHeight = data.height;
					
				}).exec();
			}, 300)
		},
		mounted() {
			this.getNavsList()
		},
		onPullDownRefresh() {

		},
		methods: {
			getNavsList() {
				let that = this
				that.$request({
					url: 'common/categoryList'
				}).then(res => {
					if (res.statusCode == 200) {
						
						that.navIndex = res.data.data[0].id
						res.data.data.unshift({
							name: "全部门店",
							id: 502
						})
						that.navsList = res.data.data
					}
					
				})
			},
			onActive(id) {
				this.navIndex = id
				this.tid = id
				this.getStoreData()
			},
		}
	}
</script>

<style scoped lang="scss">
	// 筛选弹窗
	.store {
		background-color: #181819;

		// 头像样式
		.photo {
			width: 750rpx;
			height: 574rpx;
			position: relative;

			.btn {
				width: 152rpx;
				height: 60rpx;
				display: flex;
				position: absolute;
				top: 20rpx;
				right: 34rpx;
				justify-content: space-between;

				.btn_box {
					width: 60rpx;
					height: 60rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.head {
				width: 340rpx;
				height: 340rpx;
				background-color: #ccc;
				border-radius: 50%;
			}

			.name {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 36rpx;
				color: #fff;
			}

			.line {
				width: 2rpx;
				height: 18rpx;
				margin: 0 16rpx;
				background-color: rgba(255, 255, 255, 0.6);
			}

			.tips {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.6);

			}


		}

		// 工作室
		.studio {
			height: 136rpx;
			width: 662rpx;
			padding: 0 24rpx;
			margin: 0rpx auto;
			border-radius: 20rpx;
			background: linear-gradient(180deg, #352A1D 0%, #463928 100%);

			.center_details {
				height: 88rpx;

				.top {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 500;
					font-size: 28rpx;
					color: #EBBE87;
				}
			}

			.btn_goin {
				width: 88rpx;
				height: 54rpx;
				background: #EBBE87;
				border-radius: 78rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				text-align: center;
				line-height: 54rpx;
				font-size: 24rpx;
			}

			.leftPhoto {
				width: 88rpx;
				height: 88rpx;
				margin-right: 24rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.line {
				width: 2rpx;
				height: 18rpx;
				margin: 0 16rpx;
				background-color: rgba(255, 255, 255, 0.6);
			}

			.tips {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.6);

			}
		}

		// 个人简介
		.linetitle {
			width: 686rpx;
			height: 50rpx;
			margin: 20rpx auto;

			.title_geren {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 26rpx;
				color: #F9E8BE;
			}

			.tianchong {
				width: 20rpx;
				height: 20rpx;
				background-color: #F9E8BE;
				margin-right: 10rpx;
			}

			.title_his {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 26rpx;
				color: #F9E8BE;
			}
		}

		// 详情
		.biographical {
			width: 614rpx;
			padding: 32rpx 36rpx;
			background: linear-gradient(180deg, rgba(250, 223, 156, 0.06) 0%, rgba(250, 223, 156, 0) 100%);
			border-radius: 32rpx;
			margin: 0 auto;
			border: 2rpx solid #ccc;

			.item {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 13px;
				line-height: 200%;
				color: #CCCCCC;
			}
		}

		// 风格样式
		.type {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 12px;
			color: #CCCCCC;
		}

		.line {
			width: 750rpx;
			height: 4rpx;
			background-color: #2c2d2f;
			margin-bottom: 24rpx;
		}

		.content_card {
			width: 686rpx;
			margin: 40rpx auto;

			.item {
				width: 330rpx;
				margin-right: 13rpx;
				margin-bottom: 20rpx;
				border-radius: 8rpx;
				overflow: hidden;

				.item_picture {
					width: 100%;
					height: 300rpx;
					background-color: #fff;
				}

				.item_bottom {
					height: 106rpx;
					width: 100%;
					background-color: #ccc;
				}
			}
		}

		.footer {
			height: 80rpx;
			width: 686rpx;
			margin: 0rpx auto;
			.footer_btn {
				width: 584rpx;
				height: 80rpx;
				background: linear-gradient(270deg, #B49C6E 0%, #ECD9AF 100%);
				border-radius: 40rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 80rpx;
				text-align: center;
				
				color: #111111;
			}

			.footer_left {
				height: 100%;

				.schedule {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 20rpx;
					color: #CBC3B9;
				}
			}
		}
		.di{
			width: 750rpx;
			height: 68rpx;
			background-color: #181819;
		}
	}
</style>
